
<template>
	<div class="bindCode-main" v-if="user.approveState!==1">
		<div class="bindCode-box">
			<div class="CodeMsg">
				<a><img src="static/imgs/qianbi.png" alt="" title=""/></a>
				<a>身份证信息</a>
			</div>
			<div class="CodeUl">
				<ul>
					<li>
						<input type="text" placeholder="请输入姓名"   class="" v-model="submit.name"/>
					</li>
					<li>
						<input type="text" placeholder="请输入身份证号码" class="" v-model="submit.idcard" />
					</li>
				</ul>
			</div>
			<div class="CodeImgBox">
				<h5>上传照片</h5>
				<div class="CodeImg-ul">
					<ul class="upload">
						<li>
							<div class="CodeImg">
                <img :src="submit.idcardpng1?imgUrl(submit.idcardpng1):'static/imgs/addtupian.png'" alt="" title=""/>
							</div>
							<p>身份证正面</p>
              <input type="file"  class="file" @change="upload(arguments,'idcardpng1')" ref="file1">
						</li>
						<li>
							<div class="CodeImg">
								<img :src="submit.idcardpng2?imgUrl(submit.idcardpng2):'static/imgs/addtupian.png'" alt="" title=""/>

							</div>
							<p>身份证反面</p>
              <input type="file"  class="file" @change="upload(arguments,'idcardpng2')" ref="file1">
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- btn -->
		<div class="CodeBtn" @click="submitInfo">提交</div>
	</div>
  <div class="bindCode-main-yes" v-else>
    <div class="main-yes-box">
      <ul>
        <li>
          <a>姓名:</a>
          <a>{{user.name}}</a>
        </li>
        <li>
          <a>身份证号:</a>
          <a>{{user.idcard}}</a>
        </li>
        <li>
          <a>审核状态:</a>
          <a class="state">{{user.approveStateSting}}</a>
        </li>
        <li class="main-yes-up">
          <div class="main-yes-upImg">
            <div class="yes-upImg">
              <img :src="imgUrl(submit.idcardpng1)" alt="" title=""/>
            </div>
            <p>正面照片</p>
          </div>
          <div class="main-yes-upImg">
            <div class="yes-upImg">
              <img :src="imgUrl(submit.idcardpng2)" alt="" title=""/>
            </div>
            <p>反面照片</p>
          </div>
        </li>
        <li class="main-yes-btn">
          <button disabled="disabled">不可修改</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {userService} from '#/service'
  import {Upload} from 'we-plugins'
  import baseMixins from '../../mixins/base'
  import BASE_URL from '~common/config/base-url'
	export default {
		name: 'bindCard',
    data(){
		  return {
		    submit:{
          idcard: "",			//身份证号
          idcardpng1: null,		//身份证正面照片
          idcardpng2: null,		//身份证反面照片
          name: ""				//姓名
        },
        rules:{
          name:{
            rules:[
              {
                type:'inFun',
                rule:'required',
                msg:'姓名不能为空！'
              },
            ] ,
            value:'',
            join:'and'
          },
          idcard:{
            rules:[
              {
                type:'inFun',
                rule:'required',
                msg:'身份证号码不能为空！'
              },
              {
                type:'patter',
                rule:'idCard',
                msg:'身份证格式不正确！'
              },
            ] ,
            value:'',
            join:'and'
          },
          idcardpng1:{
            rules:[
              {
                type:'inFun',
                rule:'required',
                msg:'请上传身份证正面图片！'
              }

            ] ,
            value:'',
            join:'and'
          },
          idcardpng2:{
            rules:[
              {
                type:'inFun',
                rule:'required',
                msg:'请上传身份证反面图片！'
              },

            ] ,
            value:'',
            join:'and'
          },
        },
        result:{},
        file1:null,
        file2:null
      }
    },
    mounted(){
		  this.submit.name=this.user.name
		  this.submit.idcard=this.user.idcard
		  this.submit.idcardpng1=this.user.idcardpng1
		  this.submit.idcardpng2=this.user.idcardpng2
    },
    methods:{
      submitInfo(){
        this.$nextTick(()=>{
          this.result=this.$valiForm.form(this.rules);
          if(this.result.adopt){
            userService.buyerValidate({
              data:this.submit
            })
            setTimeout(()=>{
              this.$router.push({
                name:'userInfo'
              })
            },1000)
          }else{
            let keys=Object.keys(this.result)
            for(let i=0;i<keys.length;i++){
              if(keys[i]!=='adopt'){
                this.$toast({
                  message: this.result[keys[i]].msg,
                  position: 'middle',
                  duration: 2000
                });
                return
              }
            }
          }
        })

      },
      // async upload(arg,key){
      //   let event=arg[0]
      //   let file=event.target.files[0];
      //   let upload=new Upload(file,{
      //     name:'file',
      //     options:{
      //       url:`${BASE_URL}/upload`,
      //     }
      //   })
      //   upload.on('success',(res)=>{
      //     try{
      //       res=JSON.parse(res)
      //     }catch (e) {
      //     }
      //     if(res.code===0){
      //       this.submit[key]=res.data
      //     }else{
      //       this.$notify({
      //         title: '警告',
      //         message: res.message,
      //         type: 'warning'
      //       });
      //     }
      //
      //   })
      //   let data=await upload.send()
      // }
    },
    computed:{
      ...mapGetters([
        'user'
      ]),
      disabled(){
        if(this.user.approveState) return true
        return false
      }
    },

    watch:{
      'submit.idcard':{
        immediate:true,
        handler(newVal){
          this.rules.idcard.value=newVal
        },
      },
      'submit.name':{
        immediate:true,
        handler(newVal){
          this.rules.name.value=newVal
        },
      },
      'submit.idcardpng1':{
        immediate:true,
        handler(newVal){
          this.rules.idcardpng1.value=newVal
        },
      },
      'submit.idcardpng2':{
        immediate:true,
        handler(newVal){
          this.rules.idcardpng2.value=newVal
        },
      },
    },
    mixins:[baseMixins]
	}
</script>
<style lang="stylus" scoped>

  .upload
    li
      position relative
    .file
      opacity  0
      width 100%
      height 100%
      display block
      position absolute
      top:0
      left 0

</style>
<style>
  body{
    background: white;
  }
  .bindCode-main{
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 40px);
    overflow: hidden;
  }
  .CodeMsg{
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    border-bottom: 0.01rem solid #e6e6e6;
    background: white;
  }
  .CodeMsg a{
    display: inline-block;
    float:left;
    margin-right: 0.05rem;
    color: #333;
    font-size: 0.14rem;
  }
  .CodeMsg a:first-child{
    width: 0.2rem;
    height: 0.2rem;
    margin: 0.1rem 0.05rem 0 0.2rem;
  }
  .CodeMsg a:first-child img{
    width: 100%;
    height: 100%;
    display: block;
  }
  .CodeUl{
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  .CodeUl ul li{
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    float: left;
    border-bottom: 0.01rem solid #e6e6e6;
    background: white;
  }
  .CodeUl ul li input{
    width: 4rem;
    padding: 0.12rem 0 0.1rem 0.2rem;
    color: #777;
    font-size: 0.12rem;
    float: left;
  }
  .CodeImgBox{
    width: 100%;
    height: auto;
    padding-bottom: 0.2rem;
    overflow: hidden;
    background: white;
  }
  .CodeImgBox h5{
    font-weight: inherit;
    margin: 0.1rem 0 0 0.2rem;
    color: #333;
    font-size: 0.14rem;
  }
  .CodeImg-ul{
    margin: 0.1rem 0 0 0.2rem;
  }
  .CodeImg-ul ul li{
    width: 0.96rem;
    height: 0.86rem;
    float: left;
  }
  .CodeImg-ul ul li:last-child{
    margin-right: none;
  }
  .CodeImg{
    width: 0.64rem;
    height: 0.64rem;
  }
  .CodeImg img{
    display: block;
    width: 100%;
    height: 100%;
  }
  .CodeImg-ul ul li p{
    margin-top: 0.1rem;
    color: #333;
    font-size: 0.13rem;
  }
  .CodeBtn{
    width: 90%;
    margin: 0 auto;
    height: 0.34rem;
    line-height: 0.34rem;
    background: rgb(142,10,190);
    text-align: center;
    color: white;
    font-size: 0.12rem;
    margin-top: 0.1rem;
    border-radius: 0.05rem;
  }
  .bindCode-main-yes{
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 40px);
    background: white;
    overflow: hidden;
  }
  .main-yes-box{
    width: 90%;
    margin: 0 auto;
  }
  .main-yes-box ul li{
    width: 100%;
    height: 0.3rem;
    float: left;
    line-height: 0.3rem;
  }
  .main-yes-box ul li a{
    display: inline-block;
    float: left;
    color: #4097FE;
    font-size: 0.12rem;
    margin-right: 0.05rem;
  }
  .main-yes-box ul li .state{
    color: red;
  }
  .main-yes-box ul li a:last-child{
    margin-right: inherit;
  }
  .main-yes-box ul .main-yes-up{
    width: 100%;
    height: 0.9rem;
  }
  .main-yes-box ul .main-yes-btn{
    width: 100%;
    height: 0.37rem;
    background: #7d7d7d;
    margin-top: 0.2rem;
  }
  .main-yes-box ul .main-yes-btn button{
    width: 100%;
    height: 100%;
    float:left;
    border: none;
    border-radius: 0.05rem;
    background: #7d7d7d;
    line-height: 0.37rem;
    text-align: center;
    color: white;
    font-size: 0.14rem;
  }
  .main-yes-upImg{
    width: 50%;
    float: left;
  }
  .yes-upImg{
    width: 0.7rem;
    height: 0.7rem;
    margin-left: 0.15rem;
  }
  .yes-upImg img{
    display: block;
    width: 100%;
    height: 100%;
  }
  .main-yes-upImg p{
    margin-left: 0.25rem;
    color: #4097FE;
    font-size: 0.12rem;
  }
</style>
